<template>
<div>
  <a-breadcrumb style="margin: 0px 0px 0px 0px">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>个人信息</a-breadcrumb-item>
          <a-breadcrumb-item>自我评价</a-breadcrumb-item>
    </a-breadcrumb>
<el-card style="margin-top:20px" class="card" shadow="hover">
  <h style="font-size:20px;margin-left:400px">自我评价</h>
 <el-row>
    <el-row>
        <el-col :span="1"><el-button type="primary" @click="adds()" size="large">新增</el-button></el-col>
        <!-- <el-col :span="6"><el-input size="medium" clearable v-model="input" placeholder="请输入技能名称进行搜索"></el-input></el-col>
        <el-col :span="2"><el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button></el-col> -->
    </el-row>
    
    <el-table
    :data="tableData"
    stripe
    style="width: 90%">
        
        <el-table-column type="index" width="150" label="序号">  
        </el-table-column>      <!-- 这个为序号 -->
        <el-table-column
        prop="date"
        label="评价时间"
        width="150">
        </el-table-column>
        <el-table-column
        prop="name"
        label="评价标题"
        width="150">
        </el-table-column>
        <el-table-column
        prop="beizhu"
        label="评价内容"
        width="200">
        </el-table-column>
        <el-table-column >
            <!-- 让弹框显示 -->
            <template slot-scope="scope">
                <el-button type="primary" @click="sets(scope.row)">修改</el-button>
                <el-button type="danger" @click="removes(scope.row)">删除</el-button>
            </template>
              
            
        </el-table-column>
    </el-table>



        <el-dialog title="新增评价" :visible.sync="el_show">
        <el-form>
            <el-form-item label="评价时间" :label-width="formLabelWidth">
            <el-input v-model="date" autocomplete="off" placeholder="请输入评价时间"></el-input>
            </el-form-item>
            <el-form-item label="评价标题" :label-width="formLabelWidth">
            <el-input placeholder="请输入评价标题" v-model="name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="评价内容" :label-width="formLabelWidth">
            <el-input placeholder="请输入评价内容" v-model="beizhu" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pushs()">新 增</el-button>
            <el-button  @click="err()">取 消</el-button>
        </div>
        </el-dialog>


    
        <el-dialog title="修改评价" :visible.sync="el_xiu">
        <el-form>
            <el-form-item label="使用日期" :label-width="formLabelWidth">
            <el-input v-model="newtable.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="评价标题" :label-width="formLabelWidth">
            <el-input placeholder="请输入评价标题" v-model="newtable.name" autocomplete="off"></el-input>
            </el-form-item>
           
            <el-form-item label="评价内容" :label-width="formLabelWidth">
            <el-input placeholder="请输入评价内容" v-model="newtable.beizhu" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="trueset()">修 改</el-button>
            <el-button  @click="xg_err()">取 消</el-button>
        </div>
        </el-dialog>
    
      
        
      

</el-row>  
</el-card> 
</div>
</template>

<script>
  export default {
    data() {
      return {
        searchs:[],
        input:null,
        searchtableData: [  //搜索框初始数据
        {
          date: '2019-12-02',
          name: 'Java',
          beizhu:'暂无',
          id:0
        }, 
        {
          date: '2019-12-02',
          name: 'Mysql',
          beizhu:'暂无',
          id:1
        }, 
        {
          date: '2019-12-02',
          name: 'Python',
          beizhu:'暂无',
          id:2
        }, 
        {
          date: '2019-12-02',
          name: '.Net',
          beizhu:'暂无',
          id:3
        },
        {
          date: '2019-12-02',
          name: 'Web',
          beizhu:'暂无',
          id:4
        }
        ],
        tableData: [
        {
          date: '2019-12-02',
          name: 'Java',
          beizhu:'暂无',
          id:0
        }, 
        {
          date: '2019-12-02',
          name: 'Mysql',
          beizhu:'暂无',
          id:1
        }, 
        {
          date: '2019-12-02',
          name: 'Python',
          beizhu:'暂无',
          id:2
        }, 
        {
          date: '2019-12-02',
          name: '.Net',
          beizhu:'暂无',
          id:3
        },
        {
          date: '2019-12-02',
          name: 'Web',
          beizhu:'暂无',
          id:4
        }
        ],
        el_show:false,
        
        el_xiu:false,
        date:"",
        name:"",
        beizhu:"",
        newtable:{
            date:"",
            name:"",
            beizhu:"",
        },   //修改内容暂存区
        formLabelWidth: '120px',
        newid:0   //存储点击的id
      }
    },
    methods:{
    //搜索
        search:function(){
            console.log(this.input);
            this.tableData.map((item)=>{
                if(this.input==null||this.input==''){
                    // this.$message({  在循环中会直接弹出多个同样提示框（不可用）
                    //     message: '搜索内容不存在或搜索字段错误',
                    //     type: 'warning'
                    // });
                    this.tableData=this.searchtableData;
                    return;
                }else if(item.name.includes(this.input)){ // eslint-disable-line no-unused-vars
                    this.searchs=[]; //每次搜索前清空，否则会一直追加
                    this.searchs.push(item);
                    console.log(this.searchs);
                    this.tableData=this.searchs;
                    console.log(this.tableData);
                    return;
                }
            })
        },
        //新增让弹框显示
        adds:function(){
            this.el_show=true;
            
        },
        //取消让弹框隐藏
        err:function(){
            this.el_show=false;
        },
        //删除某条信息
        removes:function(v){
            console.log(v.id)
            this.newid=this.tableData.findIndex((item)=>{
              return item.id==v.id;
            })
            this.$confirm('此操作将永久删除该评价, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.tableData.splice(this.newid,1);  //删除代码
                this.searchtableData=this.tableData;  //绑定搜索框初始数据
                console.log(this.tableData)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        //新增
        pushs:function(){
            if(!this.date||!this.name||!this.beizhu){
                this.$message.error('内容不能为空');
                return;
            }
            //使用map方法获取到id的最大值
            let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
            this.tableData.push({
                    date:this.date,
                    name:this.name,
                    beizhu:this.beizhu,
                    id:ids
            })
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
            this.$message({
                message: '创建成功',
                type: 'success'
            });
            this.date="",
            this.name="",
            this.beizhu="",
            
            this.el_show=false;
        },

        //修改
        //弹出框 显示
        sets:function(val){
            this.el_xiu=true;
           
            console.log(val)
            this.newtable={
                date:val.date,
                name:val.name,
                beizhu:val.beizhu,
                id:val.id
            }
        },
        xg_err:function(){
            this.el_xiu=false;
        },
        //保存修改
        trueset:function(){
            console.log(this.newtable.date+"===")
            for(var i=0;i<this.tableData.length;i++){
                if(this.tableData[i].id==this.newtable.id){
                    this.tableData[i].date=this.newtable.date;
                    this.tableData[i].name=this.newtable.name;
                    this.tableData[i].beizhu=this.newtable.beizhu;
                    this.tableData[i].id=this.newtable.id;
                    this.el_xiu=false;
                }
            }
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
        }
        

    }
  }
</script>
<style lang="less" scoped>
    .card{
      width:1000px;
      margin: 0 auto;
    }
</style>